<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';

import { useECharts } from '@/hooks/web/useECharts';

import { basicProps } from '../props';

export default defineComponent({
  props: basicProps,
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

    onMounted(() => {
      setOptions({
        toolbox: {},
        legend: {
          data: ['退款比数', '退款金额'],
        },
        grid: { left: '1%', right: '1%', top: '15  %', bottom: 0, containLabel: true },
        xAxis: [
          {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '退款金额',
            min: 0,
            max: 2500,
            interval: 500,
            axisLabel: {
              // formatter: '{value} °C'
            },
          },
          {
            show: false,
            type: 'value',
            name: '退款比数',
            min: 0,
            max: 2500,
            interval: 500,
            axisLabel: {
              // formatter: '{value} ml'
            },
          },
        ],
        series: [
          {
            name: '退款比数',
            type: 'bar',
            data: [100, 200, 300, 400, 500, 600, 700],
          },
          {
            name: '退款金额',
            type: 'bar',
            yAxisIndex: 1,
            data: [100, 200, 300, 400, 500, 600, 700],
          },
        ],
      });
    });
    return { chartRef };
  },
});
</script>
